import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:easy_video/controller/video/search_controller.dart'
    as Controller;
import 'package:easy_video/model/video_model.dart';

import '../../widgets/auto_image_widget.dart';

class SearchView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: EasyRefresh(
              onLoad: () {
                controller.getList();
              },
              onRefresh: () {
                controller.resetGet();
              },
              child: CustomScrollView(
                slivers: [
                  SliverAppBar(
                    automaticallyImplyLeading: false,
                    pinned: true,
                    expandedHeight: 120,
                    collapsedHeight: 120,
                    backgroundColor: Colors.white,
                    flexibleSpace: Container(
                      padding: EdgeInsets.only(
                        left: 30,
                        right: 30,
                        top: 20,
                      ),
                      width: Get.width,
                      child: Row(
                        children: [
                          Flexible(
                            child: TextField(
                              decoration: InputDecoration(
                                hintText: "你想看什么?",
                                hintStyle: TextStyle(
                                  color: Colors.grey,
                                ),
                                filled: true,
                                fillColor: Colors.grey[100],
                                border: OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                  borderRadius: BorderRadius.circular(15),
                                ),
                                suffixIcon: Container(
                                  padding: EdgeInsets.all(10),
                                  child: IconButton(
                                    color: Colors.white,
                                    style: ElevatedButton.styleFrom(
                                      backgroundColor: Colors.red,
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                    ),
                                    onPressed: () {
                                      controller.search();
                                    },
                                    icon: Icon(
                                      Icons.search,
                                    ),
                                  ),
                                ),
                              ),
                              controller: controller.searchInputController,
                            ),
                          ),
                          Visibility(
                            visible: false,
                            child: IconButton(
                              onPressed: () {
                                showModalBottomSheet(
                                  context: context,
                                  builder: (ctx) {
                                    return FilterPanel();
                                  },
                                );
                              },
                              icon: Icon(
                                Icons.tune,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return _item(controller.list[index]);
                      },
                      childCount: controller.list.length, // 列表项数量
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
      init: Controller.SearchController(),
    );
  }
}

class _item extends StatelessWidget {
  final VideoModel video;

  _item(this.video);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        height: 100,
        margin: EdgeInsets.only(
          top: 10,
          bottom: 10,
          left: 30,
          right: 30,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.shade200,
              spreadRadius: 4,
              blurRadius: 10,
            ),
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              child: Container(
                height: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10),
                    bottomLeft: Radius.circular(10),
                  ),
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AutoImage.buildImageProvider(
                      this.video.Thumb,
                    ),
                  ),
                ),
              ),
              flex: 2,
            ),
            Flexible(
              flex: 5,
              child: Container(
                padding: EdgeInsets.only(
                  left: 20,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      this.video.Title,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                    Text(
                      this.video.Desc,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      onTap: () {
        Get.toNamed("/detail/${this.video.Id}");
      },
    );
  }
}

class FilterPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
        color: Colors.white,
      ),
      padding: EdgeInsets.only(
        top: 10,
        left: 20,
        right: 20,
      ),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "Filter",
                style: TextStyle(
                  fontSize: 20,
                ),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.close,
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(
              top: 10,
            ),
            decoration: BoxDecoration(
              color: Color(0xFFF6F7FB),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Text(
                    "Sort By",
                  ),
                  padding: EdgeInsets.only(
                    top: 10,
                    left: 10,
                  ),
                ),
                Divider(
                  color: Colors.white,
                ),
                Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      _sortButton(
                        "Popular",
                        pick: true,
                      ),
                      _sortButton(
                        "New Collection",
                      ),
                      _sortButton(
                        "Highest Rating",
                      ),
                    ],
                  ),
                  padding: EdgeInsets.only(
                    top: 10,
                    bottom: 10,
                    left: 10,
                    right: 10,
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(
              top: 10,
            ),
            decoration: BoxDecoration(
              color: Color(0xFFF6F7FB),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  child: Text(
                    "Duration",
                  ),
                  padding: EdgeInsets.only(
                    top: 10,
                    left: 10,
                  ),
                ),
                Divider(
                  color: Colors.white,
                ),
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        child: Text(
                          "1 h 30 minutes",
                        ),
                        padding: EdgeInsets.only(
                          left: 15,
                        ),
                      ),
                      Slider(
                        value: 0,
                        max: 100,
                        onChanged: (rate) {},
                      ),
                    ],
                  ),
                  padding: EdgeInsets.only(
                    top: 10,
                    bottom: 10,
                    left: 10,
                    right: 10,
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(
              bottom: 20,
            ),
            color: Colors.white,
            margin: EdgeInsets.only(
              top: 20,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                _bottomButton("Clear all"),
                _bottomButton(
                  "Apply Filter",
                  pick: true,
                ),
              ],
            ),
          ),
        ],
        mainAxisSize: MainAxisSize.min,
      ),
    );
  }
}

class _sortButton extends StatelessWidget {
  final String text;
  bool pick = false;

  _sortButton(this.text, {this.pick = false});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: this.pick == false ? Colors.white : Colors.red,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(
            7,
          ),
        ),
      ),
      onPressed: () {},
      child: Text(
        style: TextStyle(
          color: this.pick == false ? Colors.grey : Colors.white,
        ),
        this.text,
      ),
    );
  }
}

class _bottomButton extends StatelessWidget {
  final String text;
  bool pick = false;

  _bottomButton(this.text, {this.pick = false});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: TextButton(
        style: ElevatedButton.styleFrom(
          backgroundColor:
              this.pick == false ? Colors.grey.withOpacity(0.3) : Colors.red,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(
              10,
            ),
          ),
        ),
        onPressed: () {},
        child: Text(
          this.text,
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
      width: 150,
      height: 60,
    );
  }
}
